<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        box-sizing: border-box;
        position: absolute;
        width: 344px;
        height: 520px;
        background: #FFFFFF;
        border-radius: 6px;
    }


    .title {
        /* 英文&数字/内容模块及正文标题 */
        font-family: SimSun, Roboto, Helvetica Neue, 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;
        text-align: center;
        margin-top: 32px;
        margin-bottom: 30px;
        /* 文字色/导航标题 */
        color: #1A1A1A;
    }


    .addr_text {
        font-family: SimSun, Roboto, Helvetica Neue, 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #ccc;
        padding-right: 70px;
    }

    .addr_title {
        font-family: SimSun, Roboto, Helvetica Neue, 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        color: #1A1A1A;
        padding-right: 70px;
    }

    .addr_wrapper {
        position: relative;
        padding-left: 40px;
        padding-right: 30px;
        padding-bottom: 10px;
        margin: 0 auto;
    }

    .addr_wrapper::before {
        display: block;
        content: '';
        position: absolute;
        left: 20px;
        top: 5px;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: blue;
        border: 2px solid #d1d1d1;
        z-index: 1;
    }

    .addr_wrapper::after {
        display: block;
        content: '';
        position: absolute;
        left: 26px;
        width: 2px;
        background-color: #aaa;
    }

    .addr_wrapper.load_addr::after {
        top: 7px;
        bottom: 0;
    }

    .addr_wrapper.unload_addr::after {
        top: 0;
        height: 7px;
    }

    .info_text {
        font-family: SimSun, Roboto, Helvetica Neue, 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 16px;
        color: #444444;
        display: inline-block;
    }

    .bottom_text {
        font-family: SimSun, Roboto,Helvetica Neue, 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        display: inline-block;
        color: #1A1A1A;
    }

    .bottom_text2 {
        font-family: SimSun, Roboto, Helvetica Neue, 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 16px;
        display: inline-block;
        color: #8e909a;
    }

    .middle_img {
        margin-left: 10px;
        width: 56px;
        height: 4px;
    }

    .separator {
        display: inline-block;
        margin-left: 6px;
        margin-right: 6px;
        color: #EBEBEB;
    }
</style>

<body>
    <div class="addr_wrapper load_addr" style="height: auto; width: 100%">
        <div class="addr_title" style="text-align: left; vertical-align: middle;">{consignorName}</div>
        <div class="addr_text" style="text-align: left; vertical-align: middle;">{loadAddr}</div>
    </div>
    <div class="addr_wrapper unload_addr" style="height: auto; width: 100%">
        <div class="addr_title" style="text-align: left; vertical-align: middle;">{consigneeName}</div>
        <div class="addr_text" style="text-align: left;  vertical-align: middle;">{unloadAddr}</div>
    </div>

    <div style="margin-top: 24px; width: 100%;">
        <img style="width: 205px;height: 205px; margin: 0 auto;display: block;" src="{qcPath}" />
    </div>
    <div style="text-align: center;margin-top: 24px">
        <span class="bottom_text" style="width: 250px;text-align: center">请使用衡基智运APP进行扫码接单</span>
    </div>
    <br />
</body>

</html>